<template>
  <div class="signin-container" v-loading="sLoading">
    <!-- 签到头部区域 -->
    <div class="signin-header" :style="headerBgStyle">
      <div class="signin-reminder" :style="{ color: textColor }">
        签到提醒
        <label class="switch">
          <input type="checkbox" class="switch-input">
          <span class="switch-slider"></span>
        </label>
      </div>
      <div class="signin-rules" :style="{ color: textColor }">签到规则</div>
      <!-- 签到按钮 -->
      <div class="signin-button-container" @click="signInHandle">
        <img class="signin-img"
          :src="isSign ? (initData.img_lq[0] && initData.img_lq[0].url) : (initData.img_nlq[0] && initData.img_nlq[0].url)"
          alt="">
      </div>
      <div class="signin-status" :style="{ color: p_font_c_qd }">
        今日未签到<br>
        已连续签到11天
      </div>
    </div>

    <!-- 奖励列表区域 -->
    <div class="rewards-section" :style="rewardsBgStyle">
      <div class="reward-item">
        <div class="reward-icon">
          <img v-if="hasImage('img_hb')" :src="getImageUrl('img_hb')" alt="红包">
          <div v-else class="default-icon red-packet">¥</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">连续签到3天</div>
          <div class="reward-desc">赠送20现金</div>
        </div>
        <div class="reward-status" :style="receivedStyle">
          已领取
        </div>
      </div>
      <div class="reward-item">
        <div class="reward-icon">
          <img v-if="hasImage('img_jf')" :src="getImageUrl('img_jf')" alt="积分">
          <div v-else class="default-icon points">★</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">连续签到5天</div>
          <div class="reward-desc">赠送30积分</div>
        </div>
        <div class="reward-status" :style="notReceivedsStyle">
          未领取
        </div>
      </div>
      <div class="reward-item">
        <div class="reward-icon">
          <img v-if="hasImage('img_jf')" :src="getImageUrl('img_jf')" alt="积分">
          <div v-else class="default-icon points">★</div>
        </div>
        <div class="reward-info">
          <div class="reward-title">累计签到5天</div>
          <div class="reward-desc">赠送25积分</div>
        </div>
        <div class="reward-status" :style="notReceivedsStyle">
          未领取
        </div>
      </div>
      <!-- 日历区域 -->
      <div class="calendar-section">
        <div class="calendar-header">
          <span class="nav-arrow">&lt;</span>
          <span class="month-year">2025年8月</span>
          <span class="nav-arrow">&gt;</span>
        </div>
        <div class="calendar-weekdays">
          <div class="weekday">日</div>
          <div class="weekday">一</div>
          <div class="weekday">二</div>
          <div class="weekday">三</div>
          <div class="weekday">四</div>
          <div class="weekday">五</div>
          <div class="weekday">六</div>
        </div>

        <div class="calendar-dates">
          <div class="date-row">
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell">1</div>
            <div class="date-cell">2</div>
            <div class="date-cell">3</div>
          </div>
          <div class="date-row">
            <div class="date-cell">4</div>
            <div class="date-cell">5</div>
            <div class="date-cell">6</div>
            <div class="date-cell">7</div>
            <div class="date-cell">8</div>
            <div class="date-cell">9</div>
            <div class="date-cell">10</div>
          </div>
          <div class="date-row">
            <div class="date-cell" :style="signedDateStyle" >10</div>
            <div class="date-cell" :style="signedDateStyle" >11</div>
            <div class="date-cell" :style="signedDateStyle" >12</div>
            <div class="date-cell">13</div>
            <div class="date-cell">14</div>
            <div class="date-cell">15</div>
            <div class="date-cell">16</div>
          </div>
          <div class="date-row">
            <div class="date-cell">17</div>
            <div class="date-cell">18</div>
            <div class="date-cell">19</div>
            <div class="date-cell">20</div>
            <div class="date-cell">21</div>
            <div class="date-cell">22</div>
            <div class="date-cell">23</div>
          </div>
          <div class="date-row">
            <div class="date-cell">24</div>
            <div class="date-cell">25</div>
            <div class="date-cell">26</div>
            <div class="date-cell">27</div>
            <div class="date-cell">28</div>
            <div class="date-cell">29</div>
            <div class="date-cell">30</div>
          </div>
          <div class="date-row">
            <div class="date-cell">31</div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
            <div class="date-cell"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, computed, watch } from '@vue/composition-api'
// 获取当前组件实例
const { proxy } = getCurrentInstance()
const emit = defineEmits(['editStopTpBmFun'])
const sLoading = ref(false)
const isSign = ref(true)

// 计算属性 - 处理样式
const headerBgStyle = computed(() => {
  // 使用正确的背景色属性 back_c1
  return {
    // backgroundColor: `#${props.initData.back_c1 || 'ff6b00'}`,
    backgroundImage: props.initData.img_hd_bg && props.initData.img_hd_bg[0]?.url
      ? `url(${props.initData.img_hd_bg[0].url})`
      : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }
})

const notReceivedsStyle = computed(() => {
  return {
    backgroundColor: `#${props.initData.btn_c_nlq || 'ff6b00'}`,
    color: `#${props.initData.font_c_nlq || 'ffffff'}`
  };
});

const textColor = computed(() => {
  return `#${props.initData.font_c_tx || 'ffffff'}`
})

const p_font_c_qd = computed(() => {
  return `#${props.initData.font_c_qd || 'ffffff'}`
})

const receivedStyle = computed(() => {
  return {
    backgroundColor: `#${props.initData.btn_c_lq || 'cccccc'}`,
    color: `#${props.initData.font_c_lq || 'ffffff'}`
  }
})

const signedDateStyle = computed(() => {
  const imageUrl = props.initData?.img_day?.[0]?.url || 'ff6b00';
  return {
    backgroundSize:'contain',
    backgroundImage: `url(${imageUrl})`,
  };
});

const rewardsBgStyle = computed(() => {
  const backC1 = props.initData.back_c1 || 'ffffff';
  const backC2 = props.initData.back_c2 || '';

  if (backC2) {
    return {
      background: `linear-gradient(to bottom, #${backC1}, #${backC2})`
    };
  } else {
    return {
      backgroundColor: `#${backC1}`
    };
  }
})

// 辅助方法 - 检查图片是否存在
const hasImage = (key) => {
  return props.initData[key] && props.initData[key][0] && props.initData[key][0].url
}

// 辅助方法 - 获取图片URL
const getImageUrl = (key) => {
  return hasImage(key) ? props.initData[key][0].url : ''
}

// 签到处理方法
const signInHandle = () => {
  if (isSign.value) {
    proxy.$message.success('已签到')
  }
  isSign.value = !isSign.value
}

const props = defineProps({
  initData: {
    type: Object,
    default: () => ({}),
  },
})

onMounted(() => { })
watch(() => props.initData, (newVal) => {
  console.log('initData updated:', newVal);
}, { deep: true });

defineExpose({})
</script>

<style scoped lang="scss">
.signin-container {
  width: 100%;
  height: 100%;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
}

/* 头部区域样式 */
.signin-header {
  padding: 20px 15px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signin-reminder {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-left: 8px;
}

.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: .4s;
  border-radius: 20px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.switch-input:checked+.switch-slider {
  background-color: rgba(255, 255, 255, 0.8);
}

.switch-input:checked+.switch-slider:before {
  transform: translateX(20px);
}

.signin-rules {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 14px;
}

.signin-status {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

/* 签到按钮样式 */
.signin-button-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  position: relative;
}

.signin-img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.button-text {
  position: relative;
  z-index: 2;
}

@keyframes coinFloat {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--x-offset)), calc(-150% + var(--y-offset)));
    opacity: 0;
  }
}

/* 奖励列表样式 */
.rewards-section {
  padding: 15px;
  position: relative;
}

.reward-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reward-icon {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.reward-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.default-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.red-packet {
  background-color: #ff4d4f;
  color: white;
}

.points {
  background-color: #faad14;
  color: white;
}

.reward-info {
  flex: 1;
}

.reward-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.reward-desc {
  font-size: 14px;
  color: #666;
}

.reward-status {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* 日历区域样式 */
.calendar-section {
  padding: 15px;
  background-color: white;
  border-radius: 20px;
  margin: 10px auto 30px;
  position: relative;
  z-index: 10;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.nav-arrow {
  cursor: pointer;
  font-size: 18px;
  color: #666;
}

.calendar-weekdays {
  display: flex;
  margin-bottom: 10px;
}

.weekday {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.calendar-dates {
  display: flex;
  flex-direction: column;
}

.date-row {
  display: flex;
  margin-bottom: 8px;
}

.date-cell {
  flex: 1;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 4px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  position: relative;
}

</style>